import { cn } from "@/lib/utils";
import Marquee from "@/components/magicui/marquee";
import AvatarCirclesDemo from "@/views/AvatarCircles";
import GradualSpacingDemo from "@/views/GradualSpacing";

const reviews = [
    {
        name: "萧炎",
        username: "@jack",
        body: "心像花朵欣然绽放 每日都弥漫着甜蜜的芬芳 愿你们爱情长长久久.",
        img: "https://img1.baidu.com/it/u=3191529192,1718370150&fm=253&fmt=auto&app=138&f=JPEG?w=515&h=500",
    },
    {
        name: "林动",
        username: "@jill",
        body: "两情相悦春常在 一世恩爱梦也甜.",
        img: "https://img0.baidu.com/it/u=3505470663,3137689523&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    },
    {
        name: "程东",
        username: "@john",
        body: "情牵彼此心相守 爱满人间岁无忧.",
        img: "https://img2.baidu.com/it/u=1926777823,1390620146&fm=253&fmt=auto?w=655&h=655",
    },
    {
        name: "曜",
        username: "@jane",
        body: "执手相伴 风雨同舟 情比金坚如初.",
        img: "https://img2.baidu.com/it/u=3629445101,924703687&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
    },
    {
        name: "法海",
        username: "@jenny",
        body: "共赴爱河情无尽 同享人生乐无边.",
        img: "https://img1.baidu.com/it/u=1123607821,739645486&fm=253&fmt=auto?w=655&h=655",
    },
    {
        name: "小七",
        username: "@james",
        body: "鸳鸯比翼飞 恩爱两不疑 情长岁月久.",
        img: "https://p3-pc.douyinpic.com/img/31bf00004c835f1807b0e~c5_300x300.jpeg?from=2956013662",
    },
];

const firstRow = reviews.slice(0, reviews.length / 2);
const secondRow = reviews.slice(reviews.length / 2);

const ReviewCard = ({
    img,
    name,
    username,
    body,
}: {
    img: string;
    name: string;
    username: string;
    body: string;
}) => {
    return (
        <figure
            className={cn(
                "relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4",
                // light styles
                "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]",
                // dark styles
                "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
            )}
        >
            <div className="flex flex-row items-center gap-2">
                <img className="rounded-full" width="32" height="32" alt="" src={img} />
                <div className="flex flex-col">
                    <figcaption className="text-sm font-medium dark:text-white">
                        {name}
                    </figcaption>
                    {/* <p className="text-xs font-medium dark:text-white/40">{username}</p> */}
                </div>
            </div>
            <blockquote className="mt-2 text-sm">{body}</blockquote>
        </figure>
    );
};

export function MarqueeDemo() {
    return (
        <>
            <div className="ml-5">
                <div className="flex"><GradualSpacingDemo></GradualSpacingDemo></div>
                <div><AvatarCirclesDemo></AvatarCirclesDemo></div>
            </div>

            <div className="w-full mx-auto relative flex h-[500px] flex-col items-center justify-center overflow-hidden rounded-lg bg-background">
                <Marquee pauseOnHover className="[--duration:20s]">
                    {firstRow.map((review) => (
                        <ReviewCard key={review.username} {...review} />
                    ))}
                </Marquee>
                <Marquee reverse pauseOnHover className="[--duration:20s]">
                    {secondRow.map((review) => (
                        <ReviewCard key={review.username} {...review} />
                    ))}
                </Marquee>
                <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white dark:from-background"></div>
                <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white dark:from-background"></div>
            </div>
        </>
    );
}

export default MarqueeDemo